<template>
	<div v-if="isAuth(['ROOT', 'DRIVER:SELECT'])">
		<!-- 搜索栏 -->
		<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<el-form-item prop="name"><el-input v-model="dataForm.name" placeholder="姓名" size="medium" class="input" clearable="clearable" /></el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.sex" class="input" placeholder="性别" size="medium" clearable="clearable">
					<el-option label="男" value="男" />
					<el-option label="女" value="女" />
				</el-select>
			</el-form-item>
			<el-form-item prop="tel"><el-input v-model="dataForm.tel" placeholder="电话" size="medium" class="input" clearable="clearable" /></el-form-item>
			<el-form-item prop="pid"><el-input v-model="dataForm.pid" placeholder="身份证" size="medium" clearable="clearable" /></el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.realAuth" class="input" placeholder="实名认证" size="medium" clearable="clearable">
					<el-option label="未认证" value="1" />
					<el-option label="已认证" value="2" />
					<el-option label="审核中" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.status" class="input" placeholder="状态" size="medium" clearable="clearable">
					<el-option label="正常" value="1" />
					<el-option label="禁用" value="2" />
					<el-option label="减少接单" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item><el-button size="medium" type="primary" @click="searchHandle()">搜索</el-button></el-form-item>
		</el-form>
		<!-- 表格栏 -->
		<el-table
			:data="dataList"
			border
			stripe
			v-loading="dataListLoading"
			cell-style="padding: 4px 0"
			style="width: 100%;"
			size="medium"
			@expand-change="expand"
			:row-key="getRowKeys"
			:expand-row-keys="expandList"
		>
			<!-- 折叠面板 -->
			<el-table-column prop="content" header-align="center" align="center" type="expand">
				<template #default="scope">
					<div>
						<table class="content-table">
							<tbody>
								<tr>
									<th>开车驾龄</th>
									<th>生日</th>
									<th>邮箱</th>
									<th>收信地址</th>
									<th>身份证住址</th>
									<th>紧急联系人</th>
									<th>联系人电话</th>	
								</tr>
								<tr>
									<td>{{ content.year }}年</td>
									<td>{{ content.birthday }}</td>
									<td>{{ content.email }}</td>
									<td>{{ content.mailAddress }}</td>
									<td>{{ content.idcardAddress }}</td>
									<td>{{ scope.row.contactName }}</td>
									<td>{{ scope.row.contactTel }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="content-container">
						<div class="left">
							<ul class="credentials-list">
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.idcardFront" :preview-src-list="content.idcardFrontList" fit="cover" />
									<p>【 身份证正面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.idcardBack" :preview-src-list="content.idcardBackList" fit="cover" />
									<p>【 身份证背面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.idcardHolding" :preview-src-list="content.idcardHoldingList" fit="cover" />
									<p>【 手持身份证 】</p>
								</li>
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.drcardFront" :preview-src-list="content.drcardFrontList" fit="cover" />
									<p>【 驾驶证正面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.drcardBack" :preview-src-list="content.drcardBackList" fit="cover" />
									<p>【 驾驶证背面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 15vw; height: 20vh" :src="content.drcardHolding" :preview-src-list="content.drcardHoldingList" fit="cover" />
									<p>【 手持驾驶证 】</p>
								</li>
							</ul>
						</div>
						<div class="right" v-if="scope.row.realAuth == '已认证'">
							<div class="summary-panel">
								<h3 class="title">【 驾驶数据摘要 】</h3>
								<ul class="monthly-list">
									<li class="item">
										<p class="section">月订单金额</p>
										<p class="value">
											<span>￥</span>
											{{ content.total }}
										</p>
									</li>
									<li class="item">
										<p class="section">月订单分账</p>
										<p class="value">
											<span>￥</span>
											{{ content.income }}
										</p>
									</li>
									<li class="item">
										<p class="section">代扣个税</p>
										<p class="value">
											<span>￥</span>
											{{ content.tax }}
										</p>
									</li>
								</ul>
								<ul class="statistics-list">
									<li class="item">
										<p class="section">总驾驶单数</p>
										<p class="value">{{ content.count }}</p>
									</li>
									<li class="item">
										<p class="section">好评总数</p>
										<p class="value">{{ content.ct1 }}</p>
									</li>
									<li class="item">
										<p class="section">差评总数</p>
										<p class="value">{{ content.ct2 }}</p>
									</li>
									<li class="item">
										<p class="section">差评总数</p>
										<p class="value">{{ content.ct3 }}</p>
									</li>
								</ul>
							</div>
							<div id="chart"></div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
				<template #default="scope">
					<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" header-align="center" align="center" min-width="100" label="姓名" />
			<el-table-column prop="sex" header-align="center" align="center" min-width="50" label="性别" />
			<el-table-column prop="tel" header-align="center" align="center" min-width="120" label="电话" />
			<el-table-column prop="pid" header-align="center" align="center" min-width="180" label="身份证" />
			<el-table-column header-align="center" align="center" min-width="80" label="实名认证" >
				<template #default="scope">
					<el-tag size="medium" :type="scope.row.realAuth === '已认证' ? 'success' : 'error'">
						{{ scope.row.realAuth }}
					</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column prop="createTime" header-align="center" align="center" min-width="100" label="创建时间" />
			<el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态" />
			<el-table-column header-align="center" align="center" width="250" label="操作">
				<template #default="scope">
					<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])" @click="showApproveModel(scope.row.id)" :disabled="scope.row.realAuth != '审核中'">
						审批认证
					</el-button>
					<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])" @click="showRepealModel(scope.row.id)" :disabled="scope.row.realAuth != '已认证'">
						撤销认证
					</el-button>
					<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])" @click="showUpdatePanel(scope.row.id)">
						设置状态
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pageSize"
			:total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>
		<el-dialog v-model="approveModelVisible" title="提示信息" width="400px" center>
			<div class="notice">你确定已经核准该司机的实名认证？</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="approveHandle(false)">拒绝</el-button>
                    <el-button type="primary" @click="approveHandle(true)">批准</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="repealModelVisible" title="提示信息" width="400px" center>
			<div class="notice">你确定取消该司机的实名认证？</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="repealModelVisible = false">取消</el-button>
					<el-button type="primary" @click="repealHandle">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<update ref="update" @refreshDataList="loadDataList"></update>
	</div>
</template>
<script>
import $ from 'jquery';
import Update from './driver-update.vue';
export default {
	components: {
		Update
	},
	data() {
		return {
			dataForm: {
				name: null,
				sex: null,
				tel: null,
				pid: null,
				realAuth: null,
				status: null
			},
			chart: '',
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			dataListLoading: false,
			dataRule: {
				name: [{ required: false, pattern: '^[\u4e00-\u9fa5]{1,10}$', message: '姓名格式错误' }],
				tel: [{ required: false, pattern: '^1\\d{10}$', message: '电话格式错误' }],
				pid: [{ required: false, pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$', message: '身份证格式错误' }]
			},
			expandList: [],
			content: {
				year: null,
				birthday: null,
				email: null,
				mailAddress: null,
				idcardAddress: null,
				idcardFront: null,
				idcardFrontList: [],
				idcardBack: null,
				idcardBackList: [],
				idcardHolding: null,
				idcardHoldingList: [],
				drcardFront: null,
				drcardFrontList: [],
				drcardBack: null,
				drcardBackList: [],
				drcardHolding: null,
				drcardHoldingList: [],
				total: null,
				income: null,
				tax: null,
				count: null,
				ct1: null,
				ct2: null,
				ct3: null
			},
			approveModelVisible: false,
			repealModelVisible: false,
			driverId: null,
			getRowKeys(row) {
				return row.id;
			},
			status: {
				'1': '正常',
				'2': '禁用',
				'3': '降低接单'
			},
			realAuth: {
				'1': '未认证',
				'2': '已认证',
				'3': '审核中'
			}
		};
	},
	methods: {
		repealHandle: function() {
		    let that = this;
		    let data = {
		        realAuth: 3,
		        driverId: that.driverId
		    };
		    //更新数据
		    that.$http('driver/updateDriverRealAuth', 'POST', data, true, function(resp) {
		        if (resp.rows == 1) {
		            that.repealModelVisible = false;
		            that.$message.success('数据更新成功');
		            that.expands = [];
		            that.getDataList(); //重新加载页面
		        }
		    });
		},
		showRepealModel: function(id) {
		    this.repealModelVisible = true;
		    this.driverId = id;
		},
		approveHandle: function(bool) {
		    let that = this;
		    let data = {
		        realAuth: (bool == true) ? 2 : 1,
		        driverId: that.driverId
		    };
		    //更新数据
		    that.$http('driver/updateDriverRealAuth', 'POST', data, true, function(resp) {
		        if (resp.rows == 1) {
		            that.approveModelVisible = false;
		            that.$message.success('数据更新成功');
		            that.expands = [];
		            that.getDataList(); //重新加载页面
		        }
		    });
		},
		showApproveModel: function(id) {
		    this.approveModelVisible = true;
		    this.driverId = id;
		},
		//获取表格数据
		getDataList() {
			let that = this;
			this.dataListLoading = true;
			let data = {
				page: this.pageIndex,
				length: this.pageSize,
				name: this.dataForm.name == '' ? null : this.dataForm.name,
				sex: this.dataForm.sex == '' ? null : this.dataForm.sex,
				tel: this.dataForm.tel == '' ? null : this.dataForm.tel,
				pid: this.dataForm.pid == '' ? null : this.dataForm.pid,
				realAuth: this.dataForm.realAuth == '' ? null : this.dataForm.realAuth,
				status: this.dataForm.status == '' ? null : this.dataForm.status
			};
		
			this.$http('driver/searchDriverByPage', 'POST', data, true, function(resp) {
				console.log(resp);
				let result = resp.result;
				let list = result.list;
				
				for (let item of list) {
					item.status = that.status[item.status + ''];
					item.realAuth = that.realAuth[item.realAuth];
				}
				that.dataList = list;
				that.totalCount = Number(result.total);
				that.dataListLoading = false;
			});
		},
		sizeChangeHandle(size){
			this.pageSize = size;
			this.pageIndex = 1;
			this.getDataList();
		},
		currentChangeHandle(page){
			this.pageIndex = page;
			this.getDataList();
		},
		searchHandle(){
			this.$refs['dataForm'].validate(valid => {
				if(valid) {
					this.getDataList();
				} else {
					return false;
				}
			})
		},
		expand(row, expandedRows){
			let that = this;
			that.expands = [];
			//展开面板
			if (expandedRows.length > 0) {
				if (row) {
					if (row.realAuth == '未认证') {
						return;
					}
					that.expands.push(row.id);
		
					let data = {
						driverId: row.id
					};
					// console.log(data);
					that.$http('driver/searchDriverComprehensiveData', 'POST', data, false, function(resp) {
						//console.log(resp);
						let summaryMap = resp.result.summaryMap;
						that.content.year = summaryMap.year;
						that.content.birthday = summaryMap.birthday;
						that.content.email = summaryMap.email;
						that.content.mailAddress = summaryMap.mailAddress;
						that.content.idcardAddress = summaryMap.idcardAddress;
						that.content.idcardFront = summaryMap.idcardFront;
						that.content.idcardFrontList = [summaryMap.idcardFront];
						that.content.idcardBack = summaryMap.idcardBack;
						that.content.idcardBackList = [summaryMap.idcardBack];
						that.content.idcardHolding = summaryMap.idcardHolding;
						that.content.idcardHoldingList = [summaryMap.idcardHolding];
						that.content.drcardFront = summaryMap.drcardFront;
						that.content.drcardFrontList = [summaryMap.drcardFront];
						that.content.drcardBack = summaryMap.drcardBack;
						that.content.drcardBackList = [summaryMap.drcardBack];
						that.content.drcardHolding = summaryMap.drcardHolding;
						that.content.drcardHoldingList = [summaryMap.drcardHolding]; 
						
						//TODO 这里以后还有代码要写
					});
				}
			}
		}
	},
	created() {
		this.getDataList();
	}
};
</script>
<style lang="less" scoped="scoped">
@import url('driver.less');
</style>
